<!DOCTYPE html>
<html>
<head>
    <title>javascript-form-file-upload</title>
</head>
<body>
    <input type="file" id="picker" />
    <img id="image" />
    <script>
        window.onload = function() {
            var output = document.getElementById("output");
            document.getElementById("picker").onchange = function () {
                var file = this.files[0];
                output.innerText = '';
                if(file.size > 1024*1024) {
                    output.innerText = 'file size great than 1M';
                    return;
                }
                var xhr = new XMLHttpRequest();
                xhr.onload = function(d) {
                    output.innerText = d.currentTarget.response;
                };
                xhr.onerror = function(err) {
                    output.innerText = 'fail:' + err.toString();
                };
                xhr.open('POST', '/upload');
                var fd = new window.FormData();
                fd.append('file', file);
                xhr.send(fd);
            };
        };
    </script>
    <pre id="output"></pre>
</body>
</html>
